<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>ZUI - 开源HTML5跨屏框架</title>

		<link href="dist/css/zui.css" rel="stylesheet">
		<link href="docs/css/doc.css" rel="stylesheet">
		<style id="themeStyle"></style>

		<link rel="shortcut icon" href="docs/favicon.ico" type="image/x-icon">
		<link rel="icon" href="docs/favicon.ico" type="image/x-icon">

		<!--[if lt IE 9]>
    <script src="dist/lib/ieonly/html5shiv.js"></script>
    <script src="dist/lib/ieonly/respond.js"></script>
    <script src="dist/lib/ieonly/excanvas.js"></script>
  <![endif]-->

	<style type="text/css">
		body{
			width: 100%;
			height: 100%;
		}
	 
	</style>
	</head>

	<body class="view-double">
		<header id="header" class="bg-primary drag">
			<div class="navbar navbar-inverse navbar-fixed-top" id="navbar" role="banner" style="padding-top: 10px;">
				<div class="container" style="padding-right: 20px;">
					<div class="navbar-header no-drag">
						<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".zui-navbar-collapse">
				          <span class="sr-only no-drag">切换导航</span>
				          <span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
				        </button>
						<a href="javascript:void();" class="navbar-brand" style="padding-left: 8px;">

							<span class="brand-title">NCUI</span> &nbsp;
							<small class="format-pkg zui-version" data-fmt-text="0.0.1"></small>
							<i data-toggle="tooltip" id="compactTogger" data-placement="bottom" class="icon icon-home"></i>
						</a>
					</div>
					<nav class="collapse navbar-collapse zui-navbar-collapse">
						<ul class="nav navbar-nav navbar-right no-drag">
							<li>
								<a title="在Github上Star项目" href="#" onclick="app.quit();"><i class="icon icon-signout"></i><span> 退出</span></a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
			<div id="headContainer drag">
				<div class="container">
					<div id="heading">
						<h1>NCUI</h1>

					</div>
					<div id="search">
						<div id="searchForm">
							<input type="text" class="form-control input-lg no-drag" id="searchInput" placeholder="基础, BrowserWindow, Menu..." />
							<i class="icon icon-search"></i>
							<button id="searchHelpBtn" type="button" class="btn btn-link no-drag"><i class="icon icon-question"></i></button>
						</div>
					</div>
				</div>

			</div>
		</header>

		<!-- 新开子页面 -->
		<div id="page">
			<div id="pageHeader" style="background: #3280FC;">
				<div class="wrapper container drag" style="max-width: none; margin: 0;">
					<i class="icon icon-star"></i>
					<h2><a class="name" href="###">图标</a></h2>
					<button type="button" class="btn btn-link no-drag" id="pageTogger" title="折叠/展开 章节" data-toggle="tooltip"></button>
					<button data-toggle="tooltip" title="刷新" type="button" style="width:40px; height: 40px; top: 10px;" class="btn btn-link no-drag" id="pageReloadBtn"><i class="icon-repeat"></i></button>
					<button data-toggle="tooltip" title="关闭（ESC）" type="button" style="width:40px; height: 40px; top: 10px;" class="btn btn-link path-close-btn path-btn no-drag" id="pageCloseBtn"><i class="path-1"></i></button>
				</div>
			</div>
			<div id="pageBody" class="scrollbar-hover">
				<div class="loader" id="pageLoader">
					<i class="icon icon-spin icon-spinner-indicator"></i>
					<span class="loading-text">加载中...</span>
					<!--<span class="error-text">加载失败，请检查网络重试。<br>另一个导致无法加载文档的原因可能是该文档尚未完成。<br>
					欢迎你在 <a href="https://github.com/easysoft/zui">Github</a> 上 <a href="https://github.com/easysoft/zui/fork">Fork</a> 项目来完善文档。
					</span>-->
				</div>
				<div class="container">
					<div id="pageContent"></div>
					<nav></nav>
				</div>
			</div>
		</div>

		<div data-placement="left" title="切换界面布局" data-toggle="tooltip" id="changeViewWrapper">
			<button type="button" class="btn btn-primary" id="changeViewBtn" data-toggle="modal" data-target="#changeViewModal"><i class="icon icon-columns"></i></button>
		</div>

		<!-- 远程内容加载图标 -->
		<div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 加载中...</div>

		<!-- 内容目录 -->
		<div id="grid" class="scrollbar-hover">
			<div class="container">
				<div class="row">
					<div class="col col-md-3 col-sm-6">
						<div class="chapter" id="chapter-basic" data-id="basic">
							<div class="chapter-heading fade scale show">
								<h4><i class="icon icon-book"></i> <span class='name'>基础</span></h4>
							</div>
							<div class="chapter-body" id="sections-basic">
							</div>
						</div>
					</div>
					<div class="col col-md-3 col-sm-6">
						<div class="chapter" id="chapter-api" data-id="api">
							<div class="chapter-heading fade scale show">
								<h4><i class="icon icon-check-empty"></i> <span class='name'>接口</span></h4>
							</div>
							<div class="chapter-body" id="sections-api">
							</div>
						</div>
					</div>
					<div class="col col-md-3 col-sm-6">
						<div class="chapter" id="chapter-cef" data-id="cef">
							<div class="chapter-heading fade scale show">
								<h4><i class="icon icon-columns"></i> <span class='name'>CEF</span></h4>
							</div>
							<div class="chapter-body" id="sections-cef">
							</div>
						</div>
					</div>
					<div class="col col-md-3 col-sm-6">
						<div class="chapter" id="chapter-extend" data-id="extend">
							<div class="chapter-heading fade scale show">
								<h4><i class="icon icon-magic"></i> <span class='name'>扩展</span></h4>
							</div>
							<div class="chapter-body" id="sections-extend">
							</div>
						</div>
					</div>
					<!--<div class="col col-md-3 col-sm-6">
						<div class="chapter" id="chapter-view2" data-id="view2">
							<div class="chapter-heading fade scale show">
								<h4><i class="icon icon-list-alt"></i> <span class='name'>视图</span></h4>
							</div>
							<div class="chapter-body" id="sections-view2">
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>

		<!-- 一些html模板代码片段 -->
		<div class="template">
			<div class="card section fade scale slide-in-up-100 slide-in-right-50" id="sectionTemplate">
				<div class="card-heading">
					<i class="icon"></i>
					<h5><a class="name" href="###"></a></h5>
				</div>
				<div class="card-content">
					<ul class="topics">
					</ul>
				</div>
			</div>
			<div class="card-content section-preview icon-preview" id="iconPreviewTemplate">
				<div class="icons"><i class="icon icon-10x"></i><i class="icon icon-5x"></i><i class="icon icon-2x"></i><i class="icon"></i></div>
				<h3><small><i class="icon "></i></small> <span class="name color-accent"></span>  <small>Unicode: \<span class="unicode">f3dd</span><span class="alias"> · 别名：<span class="alias-values"></span></span></small></h3>
				<pre class="copyable"><code><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">&quot;icon <em class="name"></em>&quot;</span><span class="tag">&gt;&lt;/i&gt;</span></code></pre>
			</div>
			<button id="copyCodeBtn" data-html="true" data-animation="false" data-toggle="tooltip" data-title="复制代码" type="button" class="btn btn-copy-code" data-tip-id="copyCodeTip" data-container="body"><i class="icon icon-copy"></i></button>
		</div>

		<!-- 视图切换对话框 -->
		<div class="modal fade" id="changeViewModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
						<h4 class="modal-title">你想用哪种布局展示页面？</h4>
					</div>
					<div class="modal-body">
						<div class="view-options">
							<a class="view-option view-option-single">
								<div class="view-shape">
									<div class="s-1"></div>
								</div>
								<div class="title strong">单页面</div>
								<p class="text-muted">页面在页面中间显示，并隐藏目录。</p>
							</a>
							<a class="view-option view-option-double">
								<div class="view-shape">
									<div class="s-1"></div>
								</div>
								<div class="title strong">双栏</div>
								<p class="text-muted">目录在左侧显示，页面在右侧显示，更好的利用宽屏空间。</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
		<script src="assets/jquery.js" type="text/javascript" charset="utf-8"></script>

		<!-- ZUI Javascript组件 -->
		<script src="dist/js/zui.js"></script>
		<script src="docs/js/doc.js"></script>

		<!-- 增强文档插件 -->
		<script async src="dist/lib/prettify/prettify.js"></script>

		<!-- Statistic -->
		<div class="hide">
			<script src="//s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
		</div>
		<script type="text/javascript">
			$(function() {
				$('body').addClass('view-double');
				include('app');
			});
		</script>
		<script>
			(function(i, s, o, g, r, a, m) {
				i['GoogleAnalyticsObject'] = r;
				i[r] = i[r] || function() {
					(i[r].q = i[r].q || []).push(arguments)
				}, i[r].l = 1 * new Date();
				a = s.createElement(o),
					m = s.getElementsByTagName(o)[0];
				a.async = 1;
				a.src = g;
				m.parentNode.insertBefore(a, m)
			})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

			ga('create', 'UA-53781622-1', 'auto');
			ga('send', 'pageview');
		</script>
		<script type="text/javascript">
		</script>
	</body>

</html>